import React, { Component } from 'react'

export default class Footer extends Component {
  constructor(){
    super()
    this.state = {
      tabs:['所有任务','未完成任务','已完成任务']
    }
  }
  
  render() {
    let {leftNum} = this.props
    return (
      <footer className="footer">
        <span className="todo-count">
            <strong> {leftNum} </strong>
            <span>
              item 
              {leftNum>1?'s ':' '} 
               left
            </span>
        </span>
        <ul className="filters">
          {
            this.state.tabs.map((item,index)=>{
              return <li key={item}>
                      <span 
                        className={this.props.activeNum===index?'selected':''}
                        onClick={()=>{
                          this.props.handleActiveNum(index)
                        }}
                      >
                        {item}
                      </span>
                    </li>
            })
          }
        </ul>

        <button className="clear-completed">
            clear all completed
          </button>
      </footer>

    )
  }
}
